<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>ol6加载百度在线地图</title>
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src='../lib/gcoord.js'></script>
    <link rel='stylesheet' href='../css/ol6.4.3/ol.css'>
    <link rel='stylesheet' href='../css/main.css'>
</head>
<body>
<div id='map'></div>
</body>
<script>
	const projectionBD09 = new ol.proj.Projection({
		code: 'BD:09',
		extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17], // 5499777.749643374, -15188226.909700098
		units: 'm',
		axisOrientation: 'enu',
		global: false
	});
	ol.proj.addProjection(projectionBD09);

	const projectionExtentInBD09 = projectionBD09.getExtent();
	let resolutions = [];
	const maxZoom = 18;
	const minZoom = 1;
	// 计算百度使用的分辨率
	for (let i = 0; i <= maxZoom; i++) {
		resolutions[i] = Math.pow(2, maxZoom - i);
	}

	console.log(resolutions);

	/*resolutions = [
        262144,
        131072,
        65536,
        32768,
        16384,
        8192,
        4096,
        2048,
        1024,
        512,
        256,
        128,
        64,
        32,
        16,
        8,
        4,
        2,
        1
    ];*/

	const tileGrid = new ol.tilegrid.TileGrid({
		origin: [0, 0],
		resolutions: resolutions
	});

	const baiduSource = new ol.source.TileImage({
		projection: 'BD:09',
		tileGrid: tileGrid,
		tileUrlFunction: (tileCoord) => {
			let [z, x, y] = tileCoord;
			y = -1 - y;
			// y = -y - 1;
			// 百度瓦片服务url将负数使用M前缀来标识
			// return `http://shangetu1.map.bdimg.com/it/u=x=${x};y=${y};z=${z};v=009;type=sate&fm=46&udt=20210407`;
			// return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407&darkmode=true`;
			// return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&scaler=1&udt=20201021&}&customid=dark`
			return `https://mapapip0.bdimg.com/customimage/tile?qt=customimage&x=${x}&y=${y}&z=${z}&udt=20251014&scale=1&ak=Rw71NpIBQBWyzzNjN3rUI9zsnVREiB4s&customid=dark&v=2.1&seckey=iiWTBjQoUJHkGKJijZLf21wxCegBdotypg1R7%2Ft%2FrN4%3D%2CSo9eGr5CQYH9yroa4g0WanGpGfAGToRpkpB16hhtLS4hXcQ-eZABKP6C_qgy480bUJXkH4DzSW-ify12DU4bYGIJgyV3Rp1zzVvMH9n5MIMnkKLbCwRjIjDD4L-ACO4TiR4nYocEjgPDI-iYh4d7QHcFjZ45E9kaslBvMXy_dVnG6tZzToXl_jVHrpNtleY9&timeStamp=1760958980543&sign=719fc4776e53`
			// return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210407`;
		}
	});
	// 百度地图层
	const baiduMapLayer = new ol.layer.Tile({
		source: baiduSource
	});

	const centerPoint = [116.384722, 39.889916]; // 邢台 - [114.507435,37.074612] ; 北京 - [116.384722, 39.889916]

	const circlePoint = gcoord.transform(centerPoint, gcoord.WGS84, gcoord.BD09MC);//ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09');
	console.log(circlePoint);

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(circlePoint)
	});

	const iconStyle = new ol.style.Style({
		image: new ol.style.Icon(
			/** @type {olx.style.IconOptions} */ ({
				anchor: [10, 26],
				anchorXUnits: 'pixels',
				anchorYUnits: 'pixels',
				src: '../image/position_orange.png'
			})
		)
	});

	iconFeature.setStyle(iconStyle);

	const vectorSource = new ol.source.Vector({
		features: [iconFeature]
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource
	});

	const map = new ol.Map({
		layers: [
			baiduMapLayer,
			iconLayer
		],
		target: 'map',
		view: new ol.View({
			center: gcoord.transform(centerPoint, gcoord.WGS84, gcoord.BD09MC),
			projection: 'BD:09',
			zoom: 14,
			maxZoom: 18,
			minZoom: 5
			// resolutions
		})
	});

	map.addEventListener('moveend', (evt) => {
		const point = evt.target.getView().getCenter();
		const bd09Point = gcoord.transform(point, gcoord.BD09MC, gcoord.WGS84);
		console.log(point, bd09Point);
	});
</script>
</html>